<template>
    <div class="js-detail-wrap">
        <p><span @click="tabOne()">演出详情</span><span @click="tabTwo()">购票须知</span></p>
        <div class="title-wrap-detail" v-if="shows">
            <h2>{{datasList.title1}}</h2>
            <img :src="datasList.jieshaoImage" alt="">
        </div>
        <div class="buy-detail-wrap" v-if="!shows">
            <img src="../../../assets/buyjieshao.png" alt="">
        </div>
    </div>
</template>

<script>
export default {
    props:['datasList'],
    data(){
        return{
            shows:true
        }
    },
    methods:{
        tabOne(){
            this.shows = true
        },
        tabTwo(){
            this.shows = false
        }
    }
}
</script>

<style lang="scss" scoped>
    .js-detail-wrap{
        width:1000px;
        min-height:500px;
        margin:20px auto;  
        /* background: rgb(240, 121, 121);  */
        p{
            padding: 10px;
            border-bottom: 1px solid rgb(145, 140, 140);
            span{
                margin-right: 20px;
                color: rgb(95, 92, 92);
                font-size: 20px;
                cursor: pointer;
            }
            span:hover{
                color:  red;
            }
        }
        .title-wrap-detail{
            text-align: center;
            margin : 20px 0;

            img{
                width: 100%;
                height: auto;
                margin-top: 20px;
            }
        }
        .buy-detail-wrap{
            img{
                margin-top: 20px;
                width:1000px;
                height: auto;
            }
        }
    }
</style>